<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 80px;
            height: 30px;
            background: #ccc;
            text-align: center;
            line-height: 30px;
            /* 当点击元素的时候会默认选中元素的内容，可以设置以下diamante，内容就不会被选择 */
            user-select: none;
        }
    </style>
</head>

<body>
    <input type="text" id="num">
    <span id="code"></span>
    <button id="btn">验证</button>
    <script src="js/utils.js"></script>
    <script>
        // 获取input元素的内容 和验证码的内容
        // 点击验证的时候，把这两个值拿去对比，一样的就返回验证成功，不一样的时候就返回验证失败
        // 验证码是动态随机的 
        // 生成4位数的随机数，并且当成 span元素的内容
        code.innerHTML = randomNum(1000, 9999);

        btn.onclick = function() {
                if (num.value === code.innerHTML) {
                    alert('验证成功')
                } else {
                    alert('验证失败');
                    // 验证失败时候 重新刷新验证码
                    code.innerHTML = randomNum(1000, 9999);

                    // 把input框的内容情况
                    num.value = '';
                }
            }
            // 点击验证码元素 刷新验证码
        code.onclick = function() {
            // this指向就是code
            this.innerHTML = randomNum(1000, 9999);
        }
    </script>
</body>

</html>